<template>
    <div class="bg">
        <van-notice-bar left-icon="volume-o" text="欢迎来到搜活帮" color="#1989fa" background="#ecf9ff" />

        <div class="box">
            <van-popover v-model="showPopover" :actions="actions" placement="top-start" trigger="click">
                <template #reference>
                    <van-button type="info" round style="width:30vw" to="page1">我是社团</van-button>
                </template>
            </van-popover>

            <van-popover v-model="showPopover" :actions="actions2" placement="top-end" trigger="click">
                <template #reference>
                    <van-button type="primary" round style="width:30vw"  to="page2">我是商家</van-button>
                </template>
            </van-popover>

        </div>

    </div>
</template>
<script>
import Vue from 'vue';
import { Button } from 'vant';
Vue.use(Button);
import { NoticeBar } from 'vant';
Vue.use(NoticeBar);
import { Popover } from 'vant';
Vue.use(Popover);
import { Icon } from 'vant';

Vue.use(Icon);
export default {
    data() {
        return {
            showPopover: true,
            // 通过 actions 属性来定义菜单选项
            actions: [{ text: '我要拉赞助' }],
             actions2: [{ text: '我要找宣传服务' }],
        };
    },
    methods: {
        onSelect(action) {


        },
    },
}
</script>
<style>
.bg {
    width: 100vw;
    min-height: 100vh;
    position: relative;
    top: 0;
    background: url("http://www.wxtsbf.com/background.svg");
    background-size: cover;
}
.box {
    display: flex;
    width: 100vw;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.van-popover__action-text {
    white-space: nowrap;
}
.myicon{
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  top:-35vw
}
</style>